<template>
	<view>
		<view style="width:100%;overflow: hidden;">
		    <view style="width:100%;height:200px;margin:50px 0 0 40px;">
		        <label>商品图片：</label>
		        <image :src="swichImage()" style="width: 200px;height: 150px">
		    </view>
		    <view style="width:80%;margin:0 auto;">
		        <label>商品名称：</label>
		        <span id="gname">{{gname}}</span>
		    </view>
		    <view style="width:80%;margin:30px auto;">
		        <label>收货地址：</label>
		        <span id="address">{{address}}</span>
		    </view>
		    <view style="width:80%;margin:30px auto;">
		        <label>需付运费：</label>
		        <span id="yunfei"></span><span>{{yunfei}}元</span>
		    </view>
		    <view style="width:210px;margin:30px auto;" @click="goPay()" v-if="!canPay">
		        <view style="height:40px;line-height: 40px;width:210px;background:grey;color:white;text-align:center;border-radius:5px;">支付运费</view>
		    </view>
			<view style="width:210px;margin:30px auto;" @click="goPay()" v-if="canPay">
			    <view style="height:40px;line-height: 40px;width:210px;background:orange;color:white;text-align:center;border-radius:5px;">支付运费</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',			//订单ID
				picture:'',		//图片
				gname:'',		//商品名称
				address:'',		//地址
				yunfei:'',		//运费
				orderInfo:{},	//订单信息
				canPay:false,	//是否显示或是否可点击支付运费按钮
			}
		},
		onLoad(opt) {
			this.id = opt.id;
			if(!this.isNull(opt.id)){
				this.getWinOrderDetail(opt.id);
			}
		},
		methods: {
			//得中奖订单详情
			getWinOrderDetail(id){
				this.$http.get('/xieliangoods/selectXingyunGoodsOrderDetail',{
					orderID:id
				}).then(res => {
					console.log(res.data)
					if(res.data.code==200){
						this.orderInfo = res.data.data;
						this.picture = res.data.msg;
						this.gname = res.data.data.gname;
						this.address = res.data.data.address;
						this.yunfei = res.data.data.jianjie;
						if(res.data.data.isPay==0){
							this.canPay = true;
						}
					}else{
						this.$u.toast(res.data.msg)
					}
				})
			},
			//去支付运费
			goPay(){
				if(this.canPay){
					if(!this.isNull(this.orderInfo)){
						this.$http.get('/xingyun/payxcx',{
							oid:this.id
						}).then(res => {
							console.log(res.data)
							if(res.data.code==200){
								console.log("跳转支付页面")
								uni.requestPayment({
									appid: res.data.data.appId,  			// AppId，注意微信小程序、公众号 AppId 可能不一致
									nonceStr: res.data.data.nonceStr, 		// 随机字符串
									package: res.data.data.package,         // 固定值
									signType: res.data.data.signType,		// 签名类型
									timeStamp: res.data.data.timeStamp,     // 时间戳（单位：秒）
									paySign:res.data.data.paySign,
								    success(res) {
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										});
										//支付成功修改订单状态，跳转个人中心页面
										that.$http.get('/xingyun/xcxNotify',{
											orderId:this.id
										}).then(res => {
											uni.navigateTo({
												url:'./center'
											})
										})
									},
								    fail(e) {
										uni.showToast({
											title: '支付失败',
											icon: 'error'
										});
									}
								})
							}else{
								this.$u.toast(res.data.msg)
							}
						})
					}else{
						this.$u.toast("数据订单不存在")
					}
				}
			},
			//处理商品图片
			swichImage(){
				return this.host+this.picture
			},
			//判断为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>

</style>
